Assignment Operators Visualizer

Compound Assignment (`+=`, `-=`, etc.)

These operators are a shorthand for performing an operation and then assigning the result to the same variable. For example, `x += 5` is equivalent to `x = x + 5`.

let x = 10;
x += 5; // x is now 15
x *= 2; // x is now 30

Arithmetic

Initial: `let x = 10`

Expression: `x += 5`

Final `x`:

Initial: `let y = 20`

Expression: `y /= 4`

Final `y`:

Bitwise & Shift

Initial: `let a = 5`

Expression: `a &= 3`

Final `a`:

Initial: `let b = 10`

Expression: `b <<= 1`

Final `b`:

Logical (ES2021)

Initial: `let x = 0`

Expression: `x ||= 5`

Final `x`:

Initial: `let y = null`

Expression: `y ??= 10`

Final `y`:

Destructuring Assignment (`[a,b]`, `{a,b}`)

A special assignment syntax introduced in ES6 that unpacks values from arrays or properties from objects into distinct variables. It's a convenient way to extract multiple values at once.

const numbers = [10, 20, 30];
const [x, y] = numbers; // x is 10, y is 20

const user = { name: "Bob", age: 30 };
const { name, age } = user; // name is "Bob", age is 30

Array Destructuring

Initial Array: const arr = [10, 20, 30]

Expression: `const [a, b] = arr`

Resulting variables:

a:

b:

Object Destructuring

Initial Object: const obj = { prop1: 'hello', prop2: 'world' }

Expression: `const { prop1, prop2 } = obj`

Resulting properties:

prop1:

prop2: